<div class="date-box">
  <div class="date-input">
    <p class="date-cover input-box middle" (click)="showDate()">{{selectDate}}</p>
  </div>
  <div class="date-full" *ngIf="showType" (click)="showType = null">

  </div>
  <!-- <div class="date-container"> -->
    <div class="day-box" *ngIf="showType == 'day'">
      <div class="date-title flex">
        <i class="icon8bf" (click)="changeMonth(-1)"></i>
        <p (click)="showType = 'year'">{{nowYear}}-{{showMonth}}-{{nowDay}}
          <i class="icon8c1 ml5"></i>
        </p>
        <i class="icon65b" (click)="changeMonth(1)"></i>
      </div>
      <ul class="week-list flex">
        <li>Sun</li>
        <li>Mon</li>
        <li>Tue</li>
        <li>Wed</li>
        <li>Thu</li>
        <li>Fri</li>
        <li>Sat</li>
      </ul>
      <ul class="day-list flex">
        <li *ngFor="let item of currentDays">
          <span (click)="selectDay(item)" [ngClass]="item.status == 0?'pass':''" [class.active]="item.name == nowDay">{{item.name}}</span>
        </li>
      </ul>
      <div class="time-box flex">
        <div class="time-block flex">
          <i class="icon673 f24" (click)="changeHour(true)"></i>
          <div>
            <input class="time-input" [(ngModel)]="nowHour">
          </div>
          <i class="icon674 f24" (click)="changeHour(false)"></i>
        </div>
        <div class="dot f24-bold">
          :
        </div>
        <div class="time-block flex">
          <i class="icon673 f24" (click)="changeMinute(true)"></i>
          <div>
            <input class="time-input" [(ngModel)]="nowMinute">
          </div>
          <i class="icon674 f24" (click)="changeMinute(false)"></i>
        </div>
      </div>
      <div class="time-btn flex">
        <min-button text="Cancel" status="primary" style="margin-right:20px;" (click)="showType = null"></min-button>
        <min-button text="Set" status="primary" (click)="setDate()"></min-button>
      </div>
    </div>
    <div class="day-box" *ngIf="showType == 'year'">
      <div class="date-title flex">
        <i class="icon8bf" (click)="changeMonth(-1)"></i>
        <p>{{nowYear}}-{{showMonth}}
          <i class="icon8c1 ml5"></i>
        </p>
        <i class="icon65b" (click)="changeMonth(1)"></i>
      </div>
      <ul class="day-list flex" *ngIf="isYear">
        <li *ngFor="let item of currentYears">
          <span (click)="selectYear(item)" [ngClass]="item.status == 0?'pass':''" [class.active]="item.name == nowYear">{{item.name}}</span>
        </li>
      </ul>
      <ul class="day-list flex" *ngIf="!isYear">
        <li *ngFor="let item of currentMonths">
          <span (click)="selectYear(item,'month')" [ngClass]="item.status == 0?'pass':''" [class.active]="item.name == nowMonth">{{item.name}}</span>
        </li>
      </ul>
    </div>
  <!-- </div> -->

</div>